<template>
  <div class="App">
    <header>
      <div class="banner">
        <div class="head-element"><span>AVAX price:</span> $0</div>
        <div class="head-element"><span>Total Amount Staked:</span> 0 AVAX</div>
      </div>
      <div class="mid-head">
        <div class="logo">
          <img src="@/assets/img/lg.png" alt="logo" />
        </div>
        <nav class="nav active">
          <ul>
            <li>
              <a
                href=""
                target="_blank"
                rel="noreferrer"
                >Audit</a
              >
            </li>
            <li>
              <a href="" target="_blank" rel="noreferrer"
                >Telegram</a
              >
            </li>
            <li>
              <a
                href=""
                target="_blank"
                rel="noreferrer"
                >Discord</a
              >
            </li>
            <li>
              <a
                href=""
                target="_blank"
                rel="noreferrer"
                >AVAX/USDC</a
              >
            </li>
            <li>
              <a
                href=""
                target="_blank"
                rel="noreferrer"
                >Contract</a
              >
            </li>
            <li>
              <a
                href=""
                target="_blank"
                rel="noreferrer"
                >Docs</a
              >
            </li>
          </ul>
        </nav>
        <div class="right">
          <button type="button" class="btn primary">Connect Wallet</button
          ><img src="@/assets/img/close.svg" alt="hamburger" />
        </div>
      </div>
    </header>
    <section class="status">
      <div class="promo">
        Stake Your AVAX &amp; Earn up to 20% Daily
        <div>
          Important notes:<br /><br />1. Basic interest rate (only for new
          deposits): +0.3% every 24 hours<br />2. Users can share referral links
          to earn bonus (at least 1 deposit to active the link). Referral
          bonuses will be automatically sent to the wallet.<br />3. No Forced
          Withdraw action for Silver, Gold, and Platinum packages
        </div>
      </div>
      <div class="status-box">
        <div class="headline">Statistics</div>
        <div class="status-container">
          <div class="status-item">
            <div class="icon"></div>
            <div class="numbers">
              <span class="reg">Contract Balance</span>
              <div>0 AVAX</div>
            </div>
          </div>
          <div class="status-item">
            <div class="icon"></div>
            <div class="numbers">
              <span class="reg">Ref Rewards</span>
              <div>0 AVAX</div>
            </div>
          </div>
          <div class="status-item">
            <div class="icon"></div>
            <div class="numbers">
              <span class="reg">Total Users</span>
              <div>0</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="packages">
      <div class="title">PACKAGES</div>
      <ul>
        <li class="package-item bg-shadow">
          <div class="header">
            <div class="type">SAVINGS</div>
            <img
              src=""
              alt="lock"
            />
          </div>
          <div class="numbers">
            <div>
              <span class="sm">Daily Earnings</span>
              <div>9.3%</div>
            </div>
            <div>
              <span class="sm">Total ROI Earnings</span>
              <div>0.00%</div>
            </div>
          </div>
          <div class="days bg-gradient">14 Days</div>
          <div class="amount">
            <input type="text" placeholder="Enter amount in AVAX" value="" />
          </div>
          <div class="days-roi">
            <span class="sm">ROI in 14 days</span>
            <div class="bg-gradient">0.00</div>
          </div>
          <button type="button" class="btn inactive">Deposit</button>
        </li>
        <li class="package-item bg-shadow">
          <div class="header">
            <div class="type">CLASSICS</div>
            <img
              src=""
              alt="lock"
            />
          </div>
          <div class="numbers">
            <div>
              <span class="sm">Daily Earnings</span>
              <div>7.8%</div>
            </div>
            <div>
              <span class="sm">Total ROI Earnings</span>
              <div>0.00%</div>
            </div>
          </div>
          <div class="days bg-gradient">21 Days</div>
          <div class="amount">
            <input type="text" placeholder="Enter amount in AVAX" value="" />
          </div>
          <div class="days-roi">
            <span class="sm">ROI in 21 days</span>
            <div class="bg-gradient">0.00</div>
          </div>
          <button type="button" class="btn inactive">Deposit</button>
        </li>
        <li class="package-item bg-shadow">
          <div class="header">
            <div class="type">PREMIUM</div>
            <img
              src=""
              alt="lock"
            />
          </div>
          <div class="numbers">
            <div>
              <span class="sm">Daily Earnings</span>
              <div>6.3%</div>
            </div>
            <div>
              <span class="sm">Total ROI Earnings</span>
              <div>0.00%</div>
            </div>
          </div>
          <div class="days bg-gradient">28 Days</div>
          <div class="amount">
            <input type="text" placeholder="Enter amount in AVAX" value="" />
          </div>
          <div class="days-roi">
            <span class="sm">ROI in 28 days</span>
            <div class="bg-gradient">0.00</div>
          </div>
          <button type="button" class="btn inactive">Deposit</button>
        </li>
        <li class="package-item bg-shadow">
          <div class="header">
            <div class="type">SILVER</div>
            <img
              src=""
              alt="lock"
            />
          </div>
          <div class="numbers">
            <div>
              <span class="sm">Daily Earnings</span>
              <div>9.3%</div>
            </div>
            <div>
              <span class="sm">Total ROI Earnings</span>
              <div>0.00%</div>
            </div>
          </div>
          <div class="days bg-gradient">14 Days</div>
          <div class="amount">
            <input type="text" placeholder="Enter amount in AVAX" value="" />
          </div>
          <div class="days-roi">
            <span class="sm">ROI in 14 days</span>
            <div class="bg-gradient">0.00</div>
          </div>
          <button type="button" class="btn inactive">Deposit</button>
        </li>
        <li class="package-item bg-shadow">
          <div class="header">
            <div class="type">GOLD</div>
            <img
              src=""
              alt="lock"
            />
          </div>
          <div class="numbers">
            <div>
              <span class="sm">Daily Earnings</span>
              <div>7.8%</div>
            </div>
            <div>
              <span class="sm">Total ROI Earnings</span>
              <div>0.00%</div>
            </div>
          </div>
          <div class="days bg-gradient">21 Days</div>
          <div class="amount">
            <input type="text" placeholder="Enter amount in AVAX" value="" />
          </div>
          <div class="days-roi">
            <span class="sm">ROI in 21 days</span>
            <div class="bg-gradient">0.00</div>
          </div>
          <button type="button" class="btn inactive">Deposit</button>
        </li>
        <li class="package-item bg-shadow">
          <div class="header">
            <div class="type">PLATINUM</div>
            <img
              src=""
              alt="lock"
            />
          </div>
          <div class="numbers">
            <div>
              <span class="sm">Daily Earnings</span>
              <div>6.3%</div>
            </div>
            <div>
              <span class="sm">Total ROI Earnings</span>
              <div>0.00%</div>
            </div>
          </div>
          <div class="days bg-gradient">28 Days</div>
          <div class="amount">
            <input type="text" placeholder="Enter amount in AVAX" value="" />
          </div>
          <div class="days-roi">
            <span class="sm">ROI in 28 days</span>
            <div class="bg-gradient">0.00</div>
          </div>
          <button type="button" class="btn inactive">Deposit</button>
        </li>
      </ul>
    </section>
    <section class="earnings">
      <div>YOUR EARNINGS</div>
      <div class="list">
        <div class="staked bg-shadow">
          <div>
            <span class="sm">STAKED AVAX</span>
            <div>0 AVAX</div>
          </div>
          <div>
            <span class="sm">Available AVAX for withdrawal</span>
            <div class="bg-gradient">0</div>
          </div>
          <button class="btn inactive">Withdraw</button>
        </div>
        <div class="ref bg-shadow">
          <div class="main">
            <span class="sm">Referrals</span>
            <p>
              You will receive: 5% from each level 1 referral deposits, 3% from
              each level 2 referral deposits and 2% from each level 3 referral
              deposits<br /><br />Note: You need to have at least 1 deposit to
              start receive earnings
            </p>
            <div class="bg-gradient">
              <span class="sm">https://avaxfomo.finance/?ref=</span
              ><img src="@/assets/img/copy.svg" alt="copy" />
            </div>
          </div>
          <div class="footer">
            <div class="head-element">
              <span>Total Referral Earned:</span> 0
            </div>
            <div class="head-element">
              <span>Total Referral Withdrawn:</span> 0
            </div>
            <div class="head-element"><span>Users Invited:</span> 0</div>
          </div>
        </div>
      </div>
    </section>
    <section class="deposits">
      <div>DEPOSITS</div>
      <ul></ul>
    </section>
    <div class="Toastify"></div>
  </div>
</template>
<script lang="ts">
import HomeTs from './home';
export default class HomePage extends HomeTs {}
</script>
<style lang="less" scoped>
@import "./home.less";
</style>